<script>

/**
 * Orders Component
 */
export default {
  data() {
    return {
      ordersData: [
        {
          identifier: "1",
          name: "文本相似度",
          type: "资讯",
          cycle: "*/*/*/5",
          createTime: "2021-01-19",
          status: "运行中",
          switch: true,
        },{
          identifier: "2",
          name: "数据去重",
          type: "招标",
          cycle: "*/*/*/5",
          createTime: "2021-01-19",
          status: "停止中",
          switch: false,
        },{
          identifier: "3",
          name: "垃圾数据过滤",
          type: "资讯",
          cycle: "*/*/*/5",
          createTime: "2021-01-19",
          status: "运行中",
          switch: true,
        },{
          identifier: "4",
          name: "历史数据标签标记",
          type: "招标",
          cycle: "*/*/*/5",
          createTime: "2021-01-19",
          status: "运行中",
          switch: true,
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      fields: [
        { key: "identifier", label: "#编号" },
        { key: "name", label: "名称" },
        { key: "type", label: "处理数据类型" },
        { key: "cycle", label: "执行周期" },
        { key: "createTime", label: "创建时间" },
        { key: "status", label: "脚本状态" },
        { key: "implement", label: "执行脚本" },
        { key: "viewDetail", label: "脚本详情" },
      ],
    };
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  methods: {
    /**
     * Search the table data with search input
     */
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    // 种子详情
    seedDetail(row){
      console.log(row);
      this.$router.push('/spider/siteDetail')
    },
    toScript(){
      let routeUrl = this.$router.resolve({
        path: '/datahouse/addScript'
      });
      window.open(routeUrl.href, '_blank');
    },
  }
};
</script>

<template>
  <div>
    <!-- 搜索 -->
    <div class="search-box">
      <div><b-button @click="toScript" pill variant="dark">+创建数据执行脚本</b-button></div>
    </div>
    <div class="table-responsive">
      <b-table
        class="table-centered"
        :items="ordersData"
        :fields="fields"
        responsive="sm"
        :per-page="perPage"
        :current-page="1"
        thead-class="thead-light"
        @filtered="onFiltered"
      >
        <template v-slot:cell(implement)="row">
          <!-- <span v-if="row.item.status=='运行中'" style="cursor: pointer;">停止</span> -->
          <!-- <span v-else style="cursor: pointer;">运行</span> -->
          <b-form-checkbox v-model="row.item.switch" switch></b-form-checkbox>
        </template>
        <template v-slot:cell(viewDetail)>
          <span style="cursor: pointer;">查看</span>
        </template>
      </b-table>
    </div>
    <div class="row">
      <div class="col">
        <div class="dataTables_paginate paging_simple_numbers float-right">
          <ul class="pagination pagination-rounded mb-0">
            <!-- pagination -->
            <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.search {
  float: left;
  width: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.border-radius{
  border-radius: 0px;
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
}
.right-dropdown{
  ::v-deep .btn{
    font-size: 0;
    border-radius: 0px;
    padding: 0.47rem 0.5rem;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    i{
      font-size: 0.9rem;
      vertical-align: middle;
    }
  }
}
.search-box{
  margin-top: 12px;
  margin-bottom: 12px;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
}
.table-centered{
  ::v-deep thead,::v-deep tbody{
    tr{
      th:last-child,td:last-child{
        text-align: right;
      }
    }
  }
}
</style>

